<template>
	<view>
		<view class="p_flex2 p_l_32" :style="'padding-top: ' + tops + 'px;height: ' + barHeight + 'px;'">
			<view class="navbar_wrapper">
				<input placeholder="搜索资料" placeholder-class="p_font_26 p_color_b2" class="p_font_26 p_flex_1"
					v-model="formData.keywords" />
				<image src="https://dy.sykj365.com/uploads/mini/cha1@2x.png" class="p_img_32 p_margin_l_16" v-if="formData.keywords"
					@click="getClearKeys">
				</image>
				<view class="p_font_26 navbar_btn" @click="getSearch">搜索</view>
			</view>
		</view>
		<view :style="'height: ' + 'calc(100vh - '+ (tops + barHeight) +'px);'" class="p_over">
			<view class="main p_flex">
				<view class="main_left">
					<view :class="{'active': item.id == formData.category_one_id}" v-for="item in categoryOneList"
						:key="item.id" @click="getKidsOne(item.id)">{{item.name}}</view>
				</view>
				<view class="p_flex_2">
					<scroll-view scroll-x class="main_tab">
						<view :class="{'active': item.id == formData.category_two_id}" v-for="item in categoryTwoList"
							:key="item.id" @click="getKidsTwo(item.id)">
							{{item.name}}{{item.count != undefined?item.count: ''}}
						</view>
					</scroll-view>
					<noneData noneTitle="暂无相关资料～" v-if="listData.length === 0"></noneData>
					<view class="main_content" v-else>
						<navigator :url="'/pages/dataBank/detail?id=' + item.id" hover-class="none" class="list_wrapper"
							v-for="item in listData" :key="item.id">
							<image :src="item.image" class="p_img_128 p_margin_r_16" mode="aspectFill"></image>
							<view class="p_flex_2">
								<view class="p_font_28 p_margin_b_8 p_two_text">{{item.name}}</view>
								<view class="p_flex9">
									<view class="p_font_24">
										<view class="p_color_b2">{{item.file_num}}个文件</view>
										<view class="p_color_b2 p_margin_t_4">{{item.download}}次打印</view>
									</view>
									<image src="https://dy.sykj365.com/uploads/mini/jia1@2x.png" class="p_img_48"
										@click.stop="getAdd(item.id)"></image>
								</view>
							</view>
						</navigator>
					</view>
					<navigator url="/pages/index/printList" hover-class="none" class="p_img_84 listAll">
						<image src="https://dy.sykj365.com/uploads/mini/gouwuche@2x.png" class="p_full"></image>
						<view>{{allNum}}</view>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import noneData from '../../components/noneData.vue';

	export default {
		components: {
			noneData
		},
		data() {
			return {
				tops: 0,
				barHeight: 0,
				formData: {
					category_one_id: '',
					category_two_id: '',
					keywords: ''
				},
				categoryOneList: [],
				categoryTwoList: [],
				listData: [],
				allNum: 0,
			}
		},
		created() {
			uni.getSystemInfo({
				success: (e) => {
					this.tops = e.statusBarHeight;
					let custom = uni.getMenuButtonBoundingClientRect();
					this.barHeight = custom.height + (custom.top - e.statusBarHeight) * 2;
				}
			})
		},
		onLoad() {
			this.getCategoryOne();
			this.getCartNum(); // 打印列表数量
		},
		onShow() {
			if (!uni.getStorageSync('openid')) {
				getApp().getUserLogin();
			}
		},
		methods: {
			getCartNum() {
				this.$http.post(this.$api.cartNum, {}, false, true).then(res => {
					this.allNum = res.data;
				})
			},
			getCategoryOne() {
				this.$http.post(this.$api.categoryOne).then(res => {
					this.categoryOneList = res.data;
					this.formData.category_one_id = res.data.length > 0 ? res.data[0].id : '';
					if (this.formData.category_one_id !== '') this.getCategoryTwo();
				})
			},
			getCategoryTwo() {
				this.$http.post(this.$api.categoryTwo, {
					parent_id: this.formData.category_one_id
				}).then(res => {
					this.categoryTwoList = res.data;
					this.formData.category_two_id = res.data.length > 0 ? res.data[0].id : '';
					this.getListData();
				})
			},
			getListData() {
				this.$http.post(this.$api.information, this.formData).then(res => {
					this.listData = res.data;
				})
			},
			getKidsOne(id) {
				if (this.formData.category_one_id == id) return;
				this.formData.category_one_id = id;
				this.getCategoryTwo();
			},
			getKidsTwo(id) {
				this.formData.category_two_id = id;
				this.getListData();
			},
			getClearKeys() {
				this.formData.keywords = '';
				this.getListData();
			},
			getSearch() {
				if (!this.formData.keywords) return getApp().getMsg('请输入搜索内容！');
				this.getListData();
			},
			getAdd(id) {
				this.$http.post(this.$api.addCart, {
					id
				}).then(res => {
					getApp().getMsg('加入成功');
					this.getCartNum();
				})
			}
		}
	}
</script>

<style lang="less">
	.navbar_wrapper {
		width: 464rpx;
		height: 64rpx;
		display: flex;
		align-items: center;
		border-radius: 8rpx;
		background-color: #F3F3F3;

		input {
			margin-left: 22rpx;
		}
	}

	.navbar_btn {
		padding: 0 22rpx;
		height: 64rpx;
		line-height: 64rpx;
	}

	.main {
		margin-top: 32rpx;
		height: calc(100% - 32rpx);
	}

	.main_left {
		width: 160rpx;
		height: 100%;
		overflow-y: auto;
		background-color: #F3F3F3;
	}

	.main_left view {
		min-height: 96rpx;
		box-sizing: border-box;
		padding: 8rpx 24rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		line-height: 40rpx;
		color: #7a7a7a;

		&.active {
			color: #05B570;
			background-color: #fff;
		}
	}

	.main_tab {
		width: 100%;
		font-size: 0;
		white-space: nowrap;
		box-sizing: border-box;
		padding-left: 16rpx;
		margin-bottom: 32rpx;
	}

	.main_tab view {
		display: inline-block;
		font-size: 26rpx;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 24rpx;
		border-radius: 4rpx;
		color: #7a7a7a;
		margin-right: 16rpx;
		background-color: #F3F3F3;

		&.active {
			color: #05B570;
			background: rgba(6, 161, 126, 0.08);
		}
	}

	.main_content {
		height: calc(100% - 92rpx);
		overflow-y: auto;
	}

	.none_wrapper {
		image {
			width: 176rpx !important;
			height: 162rpx !important;
			margin: 128rpx auto 48rpx !important;
		}
	}

	.list_wrapper {
		display: flex;
		padding: 0 32rpx;
		margin-bottom: 48rpx;
	}

	.listAll {
		bottom: 22rpx;
		left: 160rpx;
		position: fixed;

		view {
			color: #fff;
			font-size: 20rpx;
			line-height: 32rpx;
			min-width: 20rpx;
			padding: 0 6rpx;
			text-align: center;
			border-radius: 40rpx;
			background-color: #FF5555;
			position: absolute;
			top: 0;
			right: 0;
		}
	}
</style>